<template>
    <div class="home">
        <p>姓名：{{ person.name }}</p>
        <p>年龄：{{ person.age }}</p>
        <p>汽车：{{ person.car }}</p>
    </div>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeC1">修改第一台车</button>
    <button @click="changeC2">修改第二台车</button>
    <button @click="changeCar">修改整个车</button>
</template>
<script setup lang="ts" name="Page20">
import { reactive, ref,watch } from 'vue';
let person = reactive({
    name: '张三',
    age: 18,
    car: {
        c1: '奔驰',
        c2: "宝马"
    }
})
function changeName() { person.name += '~' }
function changeAge() { person.age += 1 }
function changeC1() { person.car.c1 = '奥迪' }
function changeC2() { person.car.c2 = "大众" }
function changeCar() { person.car = { c1: "法拉利", c2: "奥本" } }
/*
watch(person.name,(newValue,oldValue)=>{
    console.log('sum变化了',newValue,oldValue)
})
*/
//情况四:监视响应式对象中的某个属性，且该属性时基本类型的，要写成函数式
watch(()=>person.name,(newValue,oldValue)=>{
    console.log('sum变化了',newValue,oldValue)
})
// 修改整个车是不行  若该属性值是依然是【对象类型】，可直接编，也可写成函数，建议写成函数。
/*
watch(person.car,(newValue,oldValue)=>{
    console.log('car变化了',newValue,oldValue)
})
*/
// 整体的好了   修改单个的不行了
/*
watch(()=>person.car,(newValue,oldValue)=>{
    console.log('car变化了',newValue,oldValue)
})
*/
// 全都好了 情况四:监视响应式对象中的某个属性，且该属性是对象类型的，可以直接写，也能写函数，更推荐写函数
watch(()=>person.car,(newValue,oldValue)=>{
    console.log('car变化了',newValue,oldValue)
},{deep:true,immediate:true})
    

</script>

<style lang="scss" scoped></style>